"use client"

import {
   BadgeCheck,
   Bell,
   BookOpen,
   Bot,
   ChevronRight,
   ChevronsUpDown,
   Command,
   CreditCard,
   Folder,
   Frame,
   LifeBuoy,
   LogOut,
   Map,
   MoreHorizontal,
   PieChart,
   Send,
   Settings2,
   Share,
   Sparkles,
   SquareTerminal,
   Trash2,
} from "lucide-react"
import Link from "next/link"
import * as React from "react"

import { Icons } from "~/components/icons"
import { ny } from "~/lib/utils"
import {
   Avatar,
   AvatarFallback,
   AvatarImage,
} from "~/registry/default/ui/avatar"
import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
} from "~/registry/default/ui/breadcrumb"
import { Button } from "~/registry/default/ui/button"
import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
} from "~/registry/default/ui/collapsible"
import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
} from "~/registry/default/ui/dropdown-menu"
import {
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
} from "~/registry/default/ui/navigation-menu"
import { Separator } from "~/registry/default/ui/separator"
import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
   SidebarHeader,
   SidebarInset,
   SidebarMenu,
   SidebarMenuAction,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
   SidebarProvider,
   SidebarTrigger,
   useSidebar,
} from "~/registry/default/ui/sidebar"

export const iframeHeight = "800px"

export const description = "An inset sidebar with site header navigation."

const HEADER_HEIGHT = "4rem"

const data = {
   user: {
      name: "nyxb",
      email: "m@example.com",
      avatar: "/avatars/nyxb.jpg",
   },
   navMain: [
      {
         title: "Playground",
         url: "#",
         icon: SquareTerminal,
         isActive: true,
         items: [
            {
               title: "History",
               url: "#",
            },
            {
               title: "Starred",
               url: "#",
            },
            {
               title: "Settings",
               url: "#",
            },
         ],
      },
      {
         title: "Models",
         url: "#",
         icon: Bot,
         items: [
            {
               title: "Genesis",
               url: "#",
            },
            {
               title: "Explorer",
               url: "#",
            },
            {
               title: "Quantum",
               url: "#",
            },
         ],
      },
      {
         title: "Documentation",
         url: "#",
         icon: BookOpen,
         items: [
            {
               title: "Introduction",
               url: "#",
            },
            {
               title: "Get Started",
               url: "#",
            },
            {
               title: "Tutorials",
               url: "#",
            },
            {
               title: "Changelog",
               url: "#",
            },
         ],
      },
      {
         title: "Settings",
         url: "#",
         icon: Settings2,
         items: [
            {
               title: "General",
               url: "#",
            },
            {
               title: "Team",
               url: "#",
            },
            {
               title: "Billing",
               url: "#",
            },
            {
               title: "Limits",
               url: "#",
            },
         ],
      },
   ],
   navSecondary: [
      {
         title: "Support",
         url: "#",
         icon: LifeBuoy,
      },
      {
         title: "Feedback",
         url: "#",
         icon: Send,
      },
   ],
   projects: [
      {
         name: "Design Engineering",
         url: "#",
         icon: Frame,
      },
      {
         name: "Sales & Marketing",
         url: "#",
         icon: PieChart,
      },
      {
         name: "Travel",
         url: "#",
         icon: Map,
      },
   ],
}

const components: { title: string; href: string; description: string }[] = [
   {
      title: "Alert Dialog",
      href: "/docs/primitives/alert-dialog",
      description:
         "A modal dialog that interrupts the user with important content and expects a response.",
   },
   {
      title: "Hover Card",
      href: "/docs/primitives/hover-card",
      description:
         "For sighted users to preview content available behind a link.",
   },
   {
      title: "Progress",
      href: "/docs/primitives/progress",
      description:
         "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
   },
   {
      title: "Scroll-area",
      href: "/docs/primitives/scroll-area",
      description: "Visually or semantically separates content.",
   },
   {
      title: "Tabs",
      href: "/docs/primitives/tabs",
      description:
         "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
   },
   {
      title: "Tooltip",
      href: "/docs/primitives/tooltip",
      description:
         "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
   },
]

export default function Page() {
   const [open, setOpen] = React.useState(true)
   const { isMobile } = useSidebar()

   return (
      <div
         style={
            {
               "--header-height": HEADER_HEIGHT,
            } as React.CSSProperties
         }
      >
         <header className="sticky top-0 bg-sidebar flex h-[--header-height] shrink-0 items-center gap-2 border-b px-4 isolate z-20">
            <div className="flex items-center gap-2 w-full">
               <Button
                  className="hidden md:flex"
                  variant="ghost"
                  size="icon"
                  onClick={() => setOpen(!open)}
               >
                  <Sidebar />
               </Button>

               <div className="mx-auto flex items-center gap-2">
                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                     <Command className="size-4" />
                  </div>
                  <Separator orientation="vertical" className="ml-4 h-4" />
                  <NavigationMenu>
                     <NavigationMenuList>
                        <NavigationMenuItem>
                           <NavigationMenuTrigger className="bg-sidebar">
                              Getting started
                           </NavigationMenuTrigger>
                           <NavigationMenuContent>
                              <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
                                 <li className="row-span-3">
                                    <NavigationMenuLink asChild>
                                       <a
                                          className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
                                          href="/"
                                       >
                                          <Icons.logo className="h-6 w-6" />
                                          <div className="mb-2 mt-4 text-lg font-medium">
                                             nyxb/ui
                                          </div>
                                          <p className="text-sm leading-tight text-muted-foreground">
                                             Beautifully designed components
                                             built with Radix UI and Tailwind
                                             CSS.
                                          </p>
                                       </a>
                                    </NavigationMenuLink>
                                 </li>

                                 <li>
                                    <NavigationMenuLink asChild>
                                       <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
                                          <div className="text-sm font-medium leading-none">
                                             Introduction
                                          </div>
                                          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                                             Re-usable components built using
                                             Radix UI and Tailwind CSS.
                                          </p>
                                       </a>
                                    </NavigationMenuLink>
                                 </li>

                                 <li>
                                    <NavigationMenuLink asChild>
                                       <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
                                          <div className="text-sm font-medium leading-none">
                                             Installation
                                          </div>
                                          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                                             How to install dependencies and
                                             structure your app.
                                          </p>
                                       </a>
                                    </NavigationMenuLink>
                                 </li>

                                 <li>
                                    <NavigationMenuLink asChild>
                                       <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
                                          <div className="text-sm font-medium leading-none">
                                             Typography
                                          </div>
                                          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                                             Styles for headings, paragraphs,
                                             lists...etc
                                          </p>
                                       </a>
                                    </NavigationMenuLink>
                                 </li>
                              </ul>
                           </NavigationMenuContent>
                        </NavigationMenuItem>
                        <NavigationMenuItem>
                           <NavigationMenuTrigger className="bg-sidebar">
                              Components
                           </NavigationMenuTrigger>
                           <NavigationMenuContent>
                              <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
                                 {components.map((component) => (
                                    <li>
                                       <NavigationMenuLink
                                          key={component.title}
                                          asChild
                                       >
                                          <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
                                             <div className="text-sm font-medium leading-none">
                                                {component.title}
                                             </div>
                                             <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                                                {component.description}
                                             </p>
                                          </a>
                                       </NavigationMenuLink>
                                    </li>
                                 ))}
                              </ul>
                           </NavigationMenuContent>
                        </NavigationMenuItem>
                        <NavigationMenuItem>
                           <Link href="/docs" legacyBehavior passHref>
                              <NavigationMenuLink
                                 className={ny(
                                    navigationMenuTriggerStyle(),
                                    "bg-sidebar",
                                 )}
                              >
                                 Documentation
                              </NavigationMenuLink>
                           </Link>
                        </NavigationMenuItem>
                     </NavigationMenuList>
                  </NavigationMenu>
               </div>
            </div>
         </header>
         <SidebarProvider open={open} onOpenChange={setOpen}>
            <Sidebar
               className="top-[--header-height] pb-[--header-height]"
               variant="inset"
            >
               <SidebarHeader>
                  <SidebarMenu>
                     <SidebarMenuItem>
                        <SidebarMenuButton size="lg" asChild>
                           <a href="#">
                              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                                 <Command className="size-4" />
                              </div>
                              <div className="grid flex-1 text-left text-sm leading-tight">
                                 <span className="truncate font-semibold">
                                    Acme Inc
                                 </span>
                                 <span className="truncate text-xs">
                                    Enterprise
                                 </span>
                              </div>
                           </a>
                        </SidebarMenuButton>
                     </SidebarMenuItem>
                  </SidebarMenu>
               </SidebarHeader>
               <SidebarContent>
                  <SidebarGroup>
                     <SidebarGroupLabel>Platform</SidebarGroupLabel>
                     <SidebarMenu>
                        {data.navMain.map((item) => (
                           <Collapsible
                              key={item.title}
                              asChild
                              defaultOpen={item.isActive}
                           >
                              <SidebarMenuItem>
                                 <SidebarMenuButton
                                    asChild
                                    tooltip={item.title}
                                 >
                                    <a href={item.url}>
                                       <item.icon />
                                       <span>{item.title}</span>
                                    </a>
                                 </SidebarMenuButton>
                                 {item.items?.length ? (
                                    <>
                                       <CollapsibleTrigger asChild>
                                          <SidebarMenuAction className="data-[state=open]:rotate-90">
                                             <ChevronRight />
                                             <span className="sr-only">
                                                Toggle
                                             </span>
                                          </SidebarMenuAction>
                                       </CollapsibleTrigger>
                                       <CollapsibleContent>
                                          <SidebarMenuSub>
                                             {item.items?.map((subItem) => (
                                                <SidebarMenuSubItem
                                                   key={subItem.title}
                                                >
                                                   <SidebarMenuSubButton
                                                      asChild
                                                   >
                                                      <a href={subItem.url}>
                                                         <span>
                                                            {subItem.title}
                                                         </span>
                                                      </a>
                                                   </SidebarMenuSubButton>
                                                </SidebarMenuSubItem>
                                             ))}
                                          </SidebarMenuSub>
                                       </CollapsibleContent>
                                    </>
                                 ) : null}
                              </SidebarMenuItem>
                           </Collapsible>
                        ))}
                     </SidebarMenu>
                  </SidebarGroup>
                  <SidebarGroup className="group-data-[collapsible=icon]:hidden">
                     <SidebarGroupLabel>Projects</SidebarGroupLabel>
                     <SidebarMenu>
                        {data.projects.map((item) => (
                           <SidebarMenuItem key={item.name}>
                              <SidebarMenuButton asChild>
                                 <a href={item.url}>
                                    <item.icon />
                                    <span>{item.name}</span>
                                 </a>
                              </SidebarMenuButton>
                              <DropdownMenu>
                                 <DropdownMenuTrigger asChild>
                                    <SidebarMenuAction showOnHover>
                                       <MoreHorizontal />
                                       <span className="sr-only">More</span>
                                    </SidebarMenuAction>
                                 </DropdownMenuTrigger>
                                 <DropdownMenuContent
                                    className="w-48"
                                    side={isMobile ? "bottom" : "right"}
                                    align={isMobile ? "end" : "start"}
                                 >
                                    <DropdownMenuItem>
                                       <Folder className="text-muted-foreground" />
                                       <span>View Project</span>
                                    </DropdownMenuItem>
                                    <DropdownMenuItem>
                                       <Share className="text-muted-foreground" />
                                       <span>Share Project</span>
                                    </DropdownMenuItem>
                                    <DropdownMenuSeparator />
                                    <DropdownMenuItem>
                                       <Trash2 className="text-muted-foreground" />
                                       <span>Delete Project</span>
                                    </DropdownMenuItem>
                                 </DropdownMenuContent>
                              </DropdownMenu>
                           </SidebarMenuItem>
                        ))}
                        <SidebarMenuItem>
                           <SidebarMenuButton>
                              <MoreHorizontal />
                              <span>More</span>
                           </SidebarMenuButton>
                        </SidebarMenuItem>
                     </SidebarMenu>
                  </SidebarGroup>
                  <SidebarGroup className="mt-auto">
                     <SidebarGroupContent>
                        <SidebarMenu>
                           {data.navSecondary.map((item) => (
                              <SidebarMenuItem key={item.title}>
                                 <SidebarMenuButton asChild size="sm">
                                    <a href={item.url}>
                                       <item.icon />
                                       <span>{item.title}</span>
                                    </a>
                                 </SidebarMenuButton>
                              </SidebarMenuItem>
                           ))}
                        </SidebarMenu>
                     </SidebarGroupContent>
                  </SidebarGroup>
               </SidebarContent>
               <SidebarFooter>
                  <SidebarMenu>
                     <SidebarMenuItem>
                        <DropdownMenu>
                           <DropdownMenuTrigger asChild>
                              <SidebarMenuButton
                                 size="lg"
                                 className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                              >
                                 <Avatar className="h-8 w-8 rounded-lg">
                                    <AvatarImage
                                       src={data.user.avatar}
                                       alt={data.user.name}
                                    />
                                    <AvatarFallback className="rounded-lg">
                                       ny
                                    </AvatarFallback>
                                 </Avatar>
                                 <div className="grid flex-1 text-left text-sm leading-tight">
                                    <span className="truncate font-semibold">
                                       {data.user.name}
                                    </span>
                                    <span className="truncate text-xs">
                                       {data.user.email}
                                    </span>
                                 </div>
                                 <ChevronsUpDown className="ml-auto size-4" />
                              </SidebarMenuButton>
                           </DropdownMenuTrigger>
                           <DropdownMenuContent
                              className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
                              side={isMobile ? "bottom" : "right"}
                              align="end"
                              sideOffset={4}
                           >
                              <DropdownMenuLabel className="p-0 font-normal">
                                 <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                                    <Avatar className="h-8 w-8 rounded-lg">
                                       <AvatarImage
                                          src={data.user.avatar}
                                          alt={data.user.name}
                                       />
                                       <AvatarFallback className="rounded-lg">
                                          ny
                                       </AvatarFallback>
                                    </Avatar>
                                    <div className="grid flex-1 text-left text-sm leading-tight">
                                       <span className="truncate font-semibold">
                                          {data.user.name}
                                       </span>
                                       <span className="truncate text-xs">
                                          {data.user.email}
                                       </span>
                                    </div>
                                 </div>
                              </DropdownMenuLabel>
                              <DropdownMenuSeparator />
                              <DropdownMenuGroup>
                                 <DropdownMenuItem>
                                    <Sparkles />
                                    Upgrade to Pro
                                 </DropdownMenuItem>
                              </DropdownMenuGroup>
                              <DropdownMenuSeparator />
                              <DropdownMenuGroup>
                                 <DropdownMenuItem>
                                    <BadgeCheck />
                                    Account
                                 </DropdownMenuItem>
                                 <DropdownMenuItem>
                                    <CreditCard />
                                    Billing
                                 </DropdownMenuItem>
                                 <DropdownMenuItem>
                                    <Bell />
                                    Notifications
                                 </DropdownMenuItem>
                              </DropdownMenuGroup>
                              <DropdownMenuSeparator />
                              <DropdownMenuItem>
                                 <LogOut />
                                 Log out
                              </DropdownMenuItem>
                           </DropdownMenuContent>
                        </DropdownMenu>
                     </SidebarMenuItem>
                  </SidebarMenu>
               </SidebarFooter>
            </Sidebar>

            <SidebarInset>
               <header className=" flex shrink-0 items-center gap-2 border-b py-2">
                  <div className="flex items-center gap-2 px-4 py-2">
                     <div className="flex md:hidden items-center gap-2">
                        <SidebarTrigger />
                        <Separator
                           orientation="vertical"
                           className="mr-2 h-4"
                        />
                     </div>
                     <Breadcrumb>
                        <BreadcrumbList>
                           <BreadcrumbItem className="hidden md:block">
                              <BreadcrumbLink href="#">
                                 Building Your Application
                              </BreadcrumbLink>
                           </BreadcrumbItem>
                           <BreadcrumbSeparator className="hidden md:block" />
                           <BreadcrumbItem>
                              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
                           </BreadcrumbItem>
                        </BreadcrumbList>
                     </Breadcrumb>
                  </div>
               </header>
               <div className="flex flex-1 flex-col gap-4 p-4">
                  <div className="grid auto-rows-min gap-4 md:grid-cols-3">
                     <div className="aspect-video rounded-xl bg-muted/50" />
                     <div className="aspect-video rounded-xl bg-muted/50" />
                     <div className="aspect-video rounded-xl bg-muted/50" />
                  </div>
                  <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
               </div>
            </SidebarInset>
         </SidebarProvider>
      </div>
   )
}
